<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>黄金周迁徙</title>
  <!-- 保留一个对layui.css的引用 -->
  <link rel="stylesheet" href="{{ url_for('static', filename='layui.css') }}">
    <link href="//unpkg.com/layui@2.9.0/dist/css/layui.css" rel="stylesheet">

<script src="//unpkg.com/layui@2.9.0/dist/layui.js"></script>
  <!-- 异步加载JavaScript库 -->
  <script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js" async></script>
  <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js" async></script>
  <script src="https://assets.pyecharts.org/assets/echarts.min.js" async></script>
    <script src="//unpkg.com/layui@2.9.0/dist/layui.js"></script>
  <style>
    .city {
        margin-left: 210px;
        margin-top: 10px;
        width: 200px;
        display: inline-block;
    }
    .city-select{
        height: 50px;
        width: auto;
        margin-left: 300px;
    }
      .icon{
          width: 20px;
          display: inline-block;
      }
  </style>
</head>
<body>
    <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="test" style="height:1000px;display: inline-block;" >
          <li class="layui-nav-item layui-nav-itemed">
          </li>
          <li class="layui-nav-item ">
          </li>
                    <li class="layui-nav-item" style="margin-top: 5px"><img src="/static/img/搜索_search.png" class="icon"><a href="index" style="display: inline">黄金周热门搜索</a></li>
          <li class="layui-nav-item" style="margin-top: 5px"><img src="/static/img/东方明珠_pearl-of-the-orient.png" class="icon"><a href="golden_week" style="display: inline">黄金周迁徙</a></li>
          <li class="layui-nav-item" style="margin-top: 5px"><img src="/static/img/进入_login.png" class="icon"><a href="immigration" style="display: inline">黄金周热门迁入地</a></li>
          <li class="layui-nav-item" style="margin-top: 5px"><img src="/static/img/退出_logout.png" class="icon"><a href="emigration" style="display: inline">黄金周热门迁出地</a></li>
          <li class="layui-nav-item" style="margin-top: 5px"><img src="/static/img/建筑_building-one.png" class="icon"><a href="metropolis" style="display: inline">北上广深迁入迁出</a><img src="/static/img/左1_left-one.png" class="icon"></li>
    </ul>
    <form id="migration-form" class="layui-form city-select" action="">
        <div class="layui-form-item" style="display: inline-block;margin-top: 20px;">
            <label class="layui-form-label">请选择城市</label>
            <div class="layui-input-block">
              <select name="cities" lay-verify="required">
                <option value=""></option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
              </select>
            </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;margin-top: 20px;">
            <label class="layui-form-label">请选择日期</label>
            <div class="layui-input-block">
              <select name="datas" lay-verify="required">
                <option value=""></option>
                <option value=20230930>9月30日</option>
                <option value=20231001>10月1日</option>
                <option value=20231002>10月2日</option>
                <option value=20231003>10月3日</option>
                <option value=20231004>10月4日</option>
                <option value=20231005>10月5日</option>
                <option value=20231006>10月6日</option>
                <option value=20231007>10月7日</option>
              </select>
            </div>
        </div>
        <div class="layui-form-item" style="display: inline-block;">
            <div class="layui-input-block">
              <input type="radio" name="move_types" value="迁入" title="迁入目的地" checked>
              <input type="radio" name="move_types" value="迁出" title="迁出目的地">
            </div>
        </div>

        <div class="layui-form-item" style="display: inline-block;">
            <div class="layui-input-block">
              <button class="layui-btn" lay-submit lay-filter="formSet">确定</button>
            </div>
        </div>
        <div id="chart-container"></div>
    </form>

    <script src="{{ url_for('static', filename='layui.js') }}"></script>
    <script>
    layui.use('form', function(){
        var form = layui.form;

        // 监听表单提交事件
        form.on('submit(formSet)', function(data){
            // 获取表单数据
            let city = data.field['cities'];
            let move_types = data.field['move_types'];
            let datas = data.field['datas'];

            // 创建一个 JSON 对象
            let requestData = {
                "cities": city,
                "move_types": move_types,
                "datas": datas,
            };

            // 发送 AJAX 请求到后端
            $.ajax({
                url: "/BSGS",
                type: "POST",
                data: JSON.stringify(requestData),
                contentType: "application/json",
                success: function(response) {
                    // 处理后端返回的响应数据
                    // console.log(response);

                    // 将图表 HTML 插入到页面中的 #chart-container
                    $("#chart-container").html(response);
                },
                error: function(xhr, status, error) {
                    // 处理请求错误
                    console.log(error);
                }
            });
            return false; // 阻止表单的默认提交行为
        });
    });
    </script>
</body>
</html>
